﻿<phone:PhoneApplicationPage 
    x:Class="Toggle.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
    xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:toolkit="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls.Toolkit"
    xmlns:local="clr-namespace:Toggle"
    mc:Ignorable="d" d:DesignWidth="480" d:DesignHeight="768"
    FontFamily="{StaticResource PhoneFontFamilyNormal}"
    FontSize="{StaticResource PhoneFontSizeNormal}"
    Foreground="{StaticResource PhoneForegroundBrush}"
    SupportedOrientations="Portrait" Orientation="Portrait"
    shell:SystemTray.IsVisible="True" Loaded="PhoneApplicationPage_Loaded">

    <phone:PhoneApplicationPage.Resources>
        <Style TargetType="toolkit:HubTile">
            <Style.Setters>
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="toolkit:HubTile">
                            <StackPanel x:Name="Viewport" Height="173" Width="173" Background="{TemplateBinding Background}">
                                <StackPanel.Resources>
                                    <CubicEase EasingMode="EaseOut" x:Key="HubTileEaseOut"/>
                                </StackPanel.Resources>
                                <StackPanel.Projection>
                                    <PlaneProjection CenterOfRotationY="0.25" x:Name="ViewportProjection"/>
                                </StackPanel.Projection>
                                <VisualStateManager.VisualStateGroups>
                                    <VisualStateGroup x:Name="ImageStates">
                                        <VisualStateGroup.Transitions>
                                            <VisualTransition x:Name="ExpandedToSemiexpanded" 
                                                          From="Expanded" To="Semiexpanded"
                                                          GeneratedDuration="0:0:0.85">
                                                <Storyboard>
                                                    <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateY)" 
                                                                               Storyboard.TargetName="TitlePanel">
                                                        <EasingDoubleKeyFrame KeyTime="0:0:0.0" Value="-173.0" EasingFunction="{StaticResource HubTileEaseOut}"/>
                                                        <EasingDoubleKeyFrame KeyTime="0:0:0.85" Value="-79.0" EasingFunction="{StaticResource HubTileEaseOut}"/>
                                                    </DoubleAnimationUsingKeyFrames>
                                                    <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="RotationX" 
                                                                               Storyboard.TargetName="ViewportProjection">
                                                        <EasingDoubleKeyFrame KeyTime="0:0:0.0" Value="0.0" EasingFunction="{StaticResource HubTileEaseOut}"/>
                                                    </DoubleAnimationUsingKeyFrames>
                                                </Storyboard>
                                            </VisualTransition>
                                            <VisualTransition x:Name="SemiexpandedToCollapsed" 
                                                          From="Semiexpanded" To="Collapsed"
                                                          GeneratedDuration="0:0:0.85">
                                                <Storyboard>
                                                    <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateY)" 
                                                                               Storyboard.TargetName="TitlePanel">
                                                        <EasingDoubleKeyFrame KeyTime="0:0:0.0" Value="-79.0" EasingFunction="{StaticResource HubTileEaseOut}"/>
                                                        <EasingDoubleKeyFrame KeyTime="0:0:0.85" Value="0.0" EasingFunction="{StaticResource HubTileEaseOut}"/>
                                                    </DoubleAnimationUsingKeyFrames>
                                                </Storyboard>
                                            </VisualTransition>
                                            <VisualTransition x:Name="CollapsedToExpanded" 
                                                          From="Collapsed" To="Expanded"
                                                          GeneratedDuration="0:0:0.85">
                                                <Storyboard>
                                                    <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateY)" 
                                                                               Storyboard.TargetName="TitlePanel">
                                                        <EasingDoubleKeyFrame KeyTime="0:0:0.0" Value="0.0" EasingFunction="{StaticResource HubTileEaseOut}"/>
                                                        <EasingDoubleKeyFrame KeyTime="0:0:0.85" Value="-173.0" EasingFunction="{StaticResource HubTileEaseOut}"/>
                                                    </DoubleAnimationUsingKeyFrames>
                                                </Storyboard>
                                            </VisualTransition>
                                            <VisualTransition x:Name="ExpandedToFlipped" 
                                                          From="Expanded" To="Flipped"
                                                          GeneratedDuration="0:0:0.85">
                                                <Storyboard>
                                                    <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateY)" 
                                                                               Storyboard.TargetName="TitlePanel">
                                                        <EasingDoubleKeyFrame KeyTime="0:0:0.0" Value="-173.0" EasingFunction="{StaticResource HubTileEaseOut}"/>
                                                    </DoubleAnimationUsingKeyFrames>
                                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)"
                                                                               Storyboard.TargetName="Image">
                                                        <DiscreteObjectKeyFrame KeyTime="0:0:0.185" Value="Collapsed"/>
                                                    </ObjectAnimationUsingKeyFrames>
                                                    <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="RotationX" 
                                                                               Storyboard.TargetName="ViewportProjection">
                                                        <EasingDoubleKeyFrame KeyTime="0:0:0.0" Value="0.0" EasingFunction="{StaticResource HubTileEaseOut}"/>
                                                        <EasingDoubleKeyFrame KeyTime="0:0:0.85" Value="180.0" EasingFunction="{StaticResource HubTileEaseOut}"/>
                                                    </DoubleAnimationUsingKeyFrames>
                                                </Storyboard>
                                            </VisualTransition>
                                            <VisualTransition x:Name="FlippedToExpanded" 
                                                          From="Flipped" To="Expanded"
                                                          GeneratedDuration="0:0:0.85">
                                                <Storyboard>
                                                    <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateY)" 
                                                                               Storyboard.TargetName="TitlePanel">
                                                        <EasingDoubleKeyFrame KeyTime="0:0:0.0" Value="-173.0" EasingFunction="{StaticResource HubTileEaseOut}"/>
                                                    </DoubleAnimationUsingKeyFrames>
                                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)"
                                                                               Storyboard.TargetName="Image">
                                                        <DiscreteObjectKeyFrame KeyTime="0:0:0.185" Value="Visible"/>
                                                    </ObjectAnimationUsingKeyFrames>
                                                    <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="RotationX" 
                                                                               Storyboard.TargetName="ViewportProjection">
                                                        <EasingDoubleKeyFrame KeyTime="0:0:0.0" Value="180.0" EasingFunction="{StaticResource HubTileEaseOut}"/>
                                                        <EasingDoubleKeyFrame KeyTime="0:0:0.85" Value="360.0" EasingFunction="{StaticResource HubTileEaseOut}"/>
                                                    </DoubleAnimationUsingKeyFrames>
                                                </Storyboard>
                                            </VisualTransition>
                                        </VisualStateGroup.Transitions>
                                        <VisualStateGroup.States>
                                            <VisualState x:Name="Expanded">
                                                <Storyboard>
                                                    <DoubleAnimation Duration="0" To="-173.0" 
                                                                 Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateY)" 
                                                                 Storyboard.TargetName="TitlePanel"/>
                                                    <DoubleAnimation Duration="0" To="0.0" 
                                                                 Storyboard.TargetProperty="RotationX" 
                                                                 Storyboard.TargetName="ViewportProjection"/>
                                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)"
                                                                               Storyboard.TargetName="Image">
                                                        <DiscreteObjectKeyFrame KeyTime="0:0:0" Value="Visible"/>
                                                    </ObjectAnimationUsingKeyFrames>
                                                </Storyboard>
                                            </VisualState>
                                            <VisualState x:Name="Semiexpanded">
                                                <Storyboard>
                                                    <DoubleAnimation Duration="0" To="-79.0" 
                                                                 Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateY)" 
                                                                 Storyboard.TargetName="TitlePanel"/>
                                                </Storyboard>
                                            </VisualState>
                                            <VisualState x:Name="Collapsed"/>
                                            <VisualState x:Name="Flipped">
                                                <Storyboard>
                                                    <DoubleAnimation Duration="0" To="-173.0" 
                                                                 Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateY)" 
                                                                 Storyboard.TargetName="TitlePanel"/>
                                                    <DoubleAnimation Duration="0" To="180.0" 
                                                                 Storyboard.TargetProperty="RotationX" 
                                                                 Storyboard.TargetName="ViewportProjection"/>
                                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)"
                                                                               Storyboard.TargetName="Image">
                                                        <DiscreteObjectKeyFrame KeyTime="0:0:0" Value="Collapsed"/>
                                                    </ObjectAnimationUsingKeyFrames>
                                                </Storyboard>
                                            </VisualState>
                                        </VisualStateGroup.States>
                                    </VisualStateGroup>
                                </VisualStateManager.VisualStateGroups>
                                <Grid x:Name="TitlePanel"
                                  Height="346" Width="173"
                                  RenderTransformOrigin="0.5,0.5">
                                    <Grid.RenderTransform>
                                        <CompositeTransform/>
                                    </Grid.RenderTransform>
                                    <Grid.RowDefinitions>
                                        <RowDefinition/>
                                        <RowDefinition/>
                                    </Grid.RowDefinitions>
                                    <Border Grid.Row="0">
                                        <TextBlock VerticalAlignment="Bottom"
                                               Margin="10,0,0,6"
                                               Text="{TemplateBinding Title}"
                                               FontFamily="{StaticResource PhoneFontFamilyNormal}"
                                               FontSize="41"
                                               Foreground="{TemplateBinding Foreground}"
                                               TextWrapping="NoWrap" 
                                               LineStackingStrategy="BlockLineHeight"
                                               LineHeight="39">
                                        </TextBlock>
                                    </Border>
                                    <Image x:Name="Image" Grid.Row="1"
                                       Height="173" Width="173"
                                       Stretch="UniformToFill"
                                       Source="{TemplateBinding Source}"/>
                                </Grid>
                            </StackPanel>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style.Setters>
        </Style>
    </phone:PhoneApplicationPage.Resources>

    <!--LayoutRoot is the root grid where all page content is placed-->
    <Grid x:Name="LayoutRoot" Background="Transparent">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>

        <!--TitlePanel contains the name of the application and page title-->
        <StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">
            <TextBlock x:Name="ApplicationTitle" Text="Toggle" Style="{StaticResource PhoneTextNormalStyle}"/>
            <TextBlock x:Name="PageTitle" Text="Connections" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>
        </StackPanel>

        <!--ContentPanel - place additional content here-->
        <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
            <Grid.RowDefinitions>
                <RowDefinition Height="185"/>
                <RowDefinition Height="185"/>
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="185"/>
                <ColumnDefinition Width="185"/>
            </Grid.ColumnDefinitions>
            <local:TiltContainer  Grid.Row="0" Grid.Column="0" toolkit:TiltEffect.IsTiltEnabled="True">
                <toolkit:HubTile Name="Airplane" Source="/Images/Airplane.png" Title="Airplane" GroupTag="Connection" Tap="Airplane_Tap" />
            </local:TiltContainer>
            <local:TiltContainer  Grid.Row="0" Grid.Column="1" toolkit:TiltEffect.IsTiltEnabled="True">
                <toolkit:HubTile Name="Wifi" Source="/Images/Wifi.png" Title="Wifi" GroupTag="Connection" Tap="Wifi_Tap" />
            </local:TiltContainer>
            <local:TiltContainer  Grid.Row="1" Grid.Column="0" toolkit:TiltEffect.IsTiltEnabled="True">
                <toolkit:HubTile Name="Cellular" Source="/Images/Cellular.png" Title="Cellular" GroupTag="Connection" Tap="Cellular_Tap" />
            </local:TiltContainer>
            <local:TiltContainer  Grid.Row="1" Grid.Column="1" toolkit:TiltEffect.IsTiltEnabled="True">
                <toolkit:HubTile Name="Bluetooth" Source="/Images/Bluetooth.png" Title="Bluetooth" GroupTag="Connection" Tap="Bluetooth_Tap" />
            </local:TiltContainer>
        </Grid>
    </Grid>

</phone:PhoneApplicationPage>